<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="./css/bootstrap.css">
  <style>
    .card-group{
      /*background: #000000;*/
      margin-bottom: 2rem;
    }
   /* .row div{
      background: #399;
      border:1px solid #000000;
    }*/

  </style>
</head>
<body>
<!--cards -->
<div class="container">
  <div class="card-group">
      <div class="card">
        <div class="card-body">
          这是卡片主体
        </div>
      </div>
      <div class="card">
        <div class="card-body">
          <h4 class="card-title">卡标题</h4>
          <h6 class="card-subtitle mb-2">卡副标</h6>
          <p class="card-text">卡片文本</p>
          <a href="#" class="card-link">卡片链接</a>
        </div>
      </div>
      <div class="card">
        <img src="https://v4.bootcss.com/assets/img/bootstrap-stack.png" alt="" class="card-img-top">
        <div class="card-body">
          <p class="card-text">卡文本</p>
        </div>
      </div>
  </div>
  <div class="card-group">
      <div class="card">
        <ul class="list-group list-group-flush">
          <li class="list-group-item">Cras justo odio</li>
          <li class="list-group-item">Dapibus ac facilisis in</li>
          <li class="list-group-item">Vestibulum at eros</li>
        </ul>
      </div>
      <div class="card">
        <img class="card-img-top" src="https://v4.bootcss.com/assets/img/bootstrap-stack.png">
        <div class="card-body">
          <h4 class="card-title">卡标题</h4>
          <p class="card-text">卡内容</p>
        </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">列表组1</li>
          <li class="list-group-item">列表组1</li>
          <li class="list-group-item">列表组1</li>
        </ul>
        <div class="card-body">
          <a href="#" class="card-link">关于</a>
          <a href="#" class="card-link">查看详情</a>
        </div>
      </div>
      <div class="card">
        <h3 class="card-header">页眉</h3>
        <div class="card-body">
          <h4 class="card-title">卡头</h4>
          <p class="card-text">卡文本</p>
          <a href="#" class="btn btn-primary">链接按钮</a>
        </div>
        <h6 class="card-footer">页脚</h6>
      </div>
  </div>
  <div class="card-group">
      <div class="card">
        <div class="card-header">
          引用
        </div>
        <div class="card-body">
          <blockquote class="blockquote">
            <p>性格决定命运，气度影响格局</p>
            <footer class="blockquote-footer">九叔</footer>
          </blockquote>
        </div>
      </div>
      <div class="card">
        <div class="card-body">
          <h4 class="card-title">卡标题</h4>
          <p class="card-text">卡内容</p>
        </div>
        <img class="card-img-top" src="https://v4.bootcss.com/assets/img/bootstrap-stack.png">
      </div>
      <div class="card">
        <img class="card-img-top" src="https://v4.bootcss.com/assets/img/bootstrap-stack.png">
        <div class="card-img-overlay">
          <h4 class="card-title">卡标题</h4>
          <p class="card-text">卡内容</p>
        </div>
      </div>
  </div>
</div>

<!--<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"></script>-->
<!--<script src="https://cdn.bootcss.com/popper.js/1.11.0/umd/popper.min.js"></script>-->
<!--<script src="./js/bootstrap.js"></script>-->

</body>
</html>